<template>
  <section>
    <!-- 面包屑 -->
 <breadcrumbs></breadcrumbs>
    <div class="data-container scroll-table">
      <div>
        <div class="ind-title lh50 f16">我的个人中心</div>
      </div>
      <el-divider></el-divider>
      <div>
        <el-form ref="form"
                 :model="form"
                 label-width="80px">
          <el-form-item label="昵称">
            <el-input v-model="form.nickName"
                      disabled></el-input>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.customerPhone"
                      disabled></el-input>
          </el-form-item>
          <el-form-item label="我的头像">
            <div>
              <img v-if="form.headUrl"
                   :src="form.headUrl"
                   class="image">
              <!-- <img v-else > -->
            </div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="onSubmit">修改昵称</el-button>
            <el-button type="primary"
                       @click="changePass">修改密码</el-button>
            <el-button type="primary"
                       @click="changeHeadImg">修改头像</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <el-dialog title="修改昵称"
               :visible.sync="changeNameFormVisible">
      <el-form :model="changeNameform"
               :rules="rules"
               ref="changeNameform">
        <el-form-item label="昵称"
                      label-width="100px"
                      prop="name">
          <el-input v-model="changeNameform.name"
                    maxlength="30"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button type="primary"
                   @click="changeName('changeNameform')">确 定</el-button>
        <el-button @click="changeNameFormVisible = false">取 消</el-button>

      </div>
    </el-dialog>
    <el-dialog title="修改头像"
               :visible.sync="changeHeadImgFormVisible">
      <el-form :model="changeHeadImgform"
               :rules="rules"
               ref="changeHeadImgform">
        <el-form-item label="我的头像"
                      prop="headUrl">
          <el-upload :action="importFileUrl"
                     list-type="picture-card"
                     :before-upload="beforeAvatarUpload"
                     :auto-upload="true"
                     :on-success="getUrl"
                     :accept="'image/*'"
                     v-model="changeHeadImgform.headUrl"
                     :show-file-list="false">
            <img :src="EditAddfile"
                 v-if="EditAddfile"
                 class="img-feng">
            <i v-else
               class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label-width="120px">
          <el-button type="primary"
                     @click="changeImg('changeHeadImgform')">提交</el-button>
          <el-button @click="changeHeadImgFormVisible=false">取消</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>
    <el-dialog title="修改密码"
               :visible.sync="changePassFormVisible">
      <el-form :model="ruleForm"
               status-icon
               :rules="rules"
               ref="ruleForm"
               label-width="100px"
               class="demo-ruleForm">
        <el-form-item label="旧密码"
                      prop="oldPass">
          <el-input type="password"
                    v-model="ruleForm.oldPass"
                    show-password></el-input>
        </el-form-item>
        <el-form-item label="新密码"
                      prop="pass">
          <el-input type="password"
                    show-password
                    v-model="ruleForm.pass"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码"
                      prop="checkPass">
          <el-input type="password"
                    show-password
                    v-model="ruleForm.checkPass"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</template>

<script>
import breadcrumbs from "@/components/breadcrumbs.vue";
export default {
  components: {

    breadcrumbs,
  },
  inject: ['reload'],
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    var validateImg = (rule, value, callback) => {
      if (value === '' || value == null) {
        callback(new Error('请选择要上传的头像'));
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      EditAddfile:"",
      changeHeadImgform: {},
      changeHeadImgFormVisible: false,
      changeNameform: {},
      ruleForm: {
        pass: '',
        checkPass: '',
        oldPass: ''

      },
      rules: {
        oldPass: [
          {
            required: true, message: '请输入旧密码', trigger: 'blur'
          }
        ],
        pass: [
          {
            required: true, message: '请输入新密码', trigger: 'blur'
          }
        ],
        checkPass: [
          {
            required: true, message: '请输入确认新密码', trigger: 'blur'
          }
        ],
        // fileList: [
        //   {
        //     required: true, message: '请上传头像', trigger: 'change'
        //   }
        // ],
      
        name: [
          {
            required: true, message: '请填写要修改的昵称', trigger: 'blur'
          }
        ],
        headUrl: [
          {
            required: true, message: '请上传头像', trigger: 'change'
          }
        ],
      },
      isImgUploaded: false,
      changeNameFormVisible: false,
      changePassFormVisible: false,
      hasHeadImg: false,
      dialogFormVisible: false,
      importFileUrl: this.GLOBAL.imgBaseUrl,
      hasHeadAddList: false,
      Myform: {},
      form: {}
    }
  },
  created () {
    this.getList();
  },
  methods: {
    changeName (formName) {

      // this.changeNameform.name = this.form.nickName
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.admincustomer.updateNickName({
            nickName: this.changeNameform.name

          }).then(d => {
            if (d.code == 200) {
              this.getList();
              this.changeNameFormVisible = false;
              this.$message.success('修改成功');
              // this.$router.go(0);
            } else {
              this.$message.error(d.msg);
            }
          })
        }
      })
    },
    resetImg () { },
    // changeForm () { },
    changeImg (formName) {
      console.log("tupian")
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.admincustomer.updateNickName({

            headUrl:this.changeHeadImgform.headUrl

          }).then(d => {
            if (d.code == 200) {
              this.changeHeadImgFormVisible = false;
              this.$message.success('修改成功');
              this.getList();
              // this.$router.go(0);
            }
          })
          // console.log('成功');
        }
      })
    },
    changeHeadImg () {
      this.changeHeadImgFormVisible = true;
    },
    getList () {
      this.$api.admincustomer.getcustomerinfo().then(d => {
        if (d.code == 200) {
          console.log('成功');
          if (d.data.headUrl == null) {
            d.data.headUrl = require('../../assets/images/dingning.png')
          }
          if (d.data.nickName == null) {
            d.data.nickName = '叮咛用户'
          }
          if (d.data.customerPhone == null) {
            d.data.customerPhone = '无'
          }
          this.form = d.data;
        }
      })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$api.admincustomer.xiugaimima({
            newPwd: this.ruleForm.pass,
            oldPwd: this.ruleForm.oldPass
          }).then(d => {
            if (d.code == 200) {
              this.changePassFormVisible = false;
              this.$message.success('修改成功');
            } else {
              this.$message.error(d.msg);
            }
          })
          console.log(11111);
        }
      })
    },
    resetForm () {
      this.$refs.ruleForm.resetFields();
      this.changePassFormVisible = false;
    },
    changePass () {
      this.changePassFormVisible = true;
    },

    onSubmit () {
      this.$set(this.changeNameform, 'name', this.form.nickName)
      console.log(1111111, this.form.nickName);
      this.changeNameFormVisible = true;
      console.log('submit!');
    },
    beforeAvatarUpload (file) {
      console.log(file, 231232)
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }
      return isLt2M;
    },
    getUrl (item) {
      this.$message({
        type: 'success',
        message: '图片上传成功'
      });
      this.EditAddfile = item;
      // console.log(item.data.url);
      this.hasHeadImg = true;
      this.isImgUploaded = true;
      this.$set(this.changeHeadImgform, 'headUrl', item);
      this.$refs.changeHeadImgform.validateField('headUrl');
    },
  }
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  margin-top: 50px;
}
.img-feng {
  width: 140px;
  height: 140px;
}
.ad-style {
  width: 10px;
}
.el-upload-list--picture-card .el-upload-list__item-actions {
  width: 50%;
}
.image {
  width: 120px;
  height: 120px;
}
</style>